实例讲解Vue怎么实现上传文件功能 | 您所在的位置:网站首页 › vue vue-router 对象 › 实例讲解Vue怎么实现上传文件功能 |
Vue是一款流行的JavaScript框架,它被广泛应用于前端开发当中。在Vue中,文件上传是一个很常见的需求,本文将介绍Vue上传文件的写法。 一、安装依赖 Vue文件上传需要使用axios和vue-router这两个依赖,所以我们需要安装这两个依赖: npm install axios vue-router --save登录后复制二、HTML代码 下面是Vue上传文件的HTML代码: 上传 登录后复制其中,onFileChange是选择文件时触发的事件,upload是点击上传按钮时触发的事件。 三、JavaScript代码 接下来,我们需要编写Vue的JavaScript代码: import axios from 'axios' import router from 'vue-router' export default { name: 'file-upload', data () { return { file: null, errorMsg: '' } }, methods: { onFileChange (event) { this.file = event.target.files[0]; }, upload () { let formData = new FormData(); formData.append('file', this.file); let token = localStorage.getItem('token'); if (token) { axios.post('/api/upload', formData, { headers: { 'Authorization': 'Bearer ' + token } }) .then(response => { router.push('/success'); }) .catch(error => { this.errorMsg = '上传文件失败'; }) } } } } 登录后复制其中,我们首先import了axios和vue-router依赖,然后定义了一个data对象,包含了file和errorMsg两个属性,分别表示文件和错误信息。 接着,我们定义了两个方法:onFileChange和upload。onFileChange方法会在选择文件时触发,将选中的文件保存在data对象的file属性中。upload方法会在上传按钮被点击时触发,首先创建一个FormData对象,然后通过axios.post方法向服务器上传文件,上传成功后使用vue-router将页面跳转到成功页面,在上传过程中发生错误,errorMsg属性被赋值为上传文件失败。 四、总结 Vue上传文件的写法相对较简单,只需要了解axios和vue-router两个依赖的用法,就能够实现文件上传功能。希望本文的介绍能够对大家有所帮助。 以上就是实例讲解Vue怎么实现上传文件功能的详细内容,更多请关注php中文网其它相关文章! |
CopyRight 2018-2019 实验室设备网 版权所有 |